<template>
    <div>
      <Layout ref="layout" @on-ok="handleSubmit">
        <Form slot="content" ref="formInline" :model="formInline" >
          <FormItem label="参数名" prop="paramName">
            <Input type="text" :readonly="true" v-model="formInline.paramName">
            </Input>
          </FormItem>
          <FormItem label="说明" prop="mark">
            <Input type="textarea" :readonly="true" v-model="formInline.mark">
            </Input>
          </FormItem>
          <FormItem label="参数值" prop="paramValue">
            <Input type="text" v-model="formInline.paramValue" v-if="formInline.type === 2">
            </Input>
            <Input type="number" v-model="formInline.paramValue" v-if="formInline.type === 3">
            </Input>
            <i-switch v-if="formInline.type === 1" true-value="Y"  false-value="N" v-model="formInline.paramValue"  />
          </FormItem>
        </Form>
      </Layout>
      <etable ref="eTable" :columns="columns"
              easySearchPlaceholder="说明" @btnClick="handClick" :tools="['refresh','easySearch']">
      </etable>
    </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'
import Layout from '../../../components/layout/layout'
import { setSysParam } from '../../../api/sys/param'

export default {
  name: 'params',
  components: {
    Layout,
    etable
  },
  data () {
    return {
      url: '/sys/param/list?',
      formInline: {},
      columns: [
        {
          type: 'index',
          width: 60,
          maxWidth: 60,
          align: 'center'
        },
        { title: '参数名', key: 'paramName', align: 'center', minWidth: 120 },
        { title: '参数值', key: 'paramValue', align: 'center', width: 120 },
        { title: '说明', key: 'mark', align: 'center', width: 180 },
        { title: '参数类型',
          key: 'type',
          align: 'center',
          width: 100,
          render: (h, param) => {
            let t = ''
            if (param.row.type === 1) {
              t = 'Boolean'
            } else if (param.row.type === 2) {
              t = 'String'
            } else if (param.row.type === 3) {
              t = 'Integer'
            }
            return h('span', t)
          } },
        {
          title: '操作',
          key: 'handle',
          align: 'center',
          width: 140,
          options: ['edit']
        }
      ]
    }
  },
  methods: {
    init () {
      this.$refs['eTable'].init(this.url)
    },
    handClick (name, param) {
      if (name === 'edit') {
        let obj = {
          'paramName': param.row.paramName,
          'paramValue': param.row.paramValue,
          'mark': param.row.mark,
          'type': param.row.type
        }
        this.formInline = obj
        this.$refs['layout'].show()
      }
    },
    handleSubmit () {
      setSysParam(this.formInline.paramName, this.formInline.paramValue).then(res => {
        if (res.code === 200) {
          this.$Message.success('修改成功')
          this.$refs['layout'].hide()
          this.init()
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
